<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>510-梦想工作室资源共享</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/icons/font/bootstrap-icons.min.css">
    <style>
        /*顶栏大小及内部设置*/
        .header{
            height:150px;
            background-color: #2c416f;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            color: white;
            text-align: center;
            z-index: 1000;
        }
        body{
            background-color: #cacaca;
        }
        /*首页logo和工作室名合并框CSS设置*/
        .header-left{
            display:flex;
            align-items: center;
        }
        /*logo CSS设置*/
        .header img{
            height:120px;
            margin-right: 10px;
        }
        /*工作室名CSS设置*/
        .hp{
            font-size: 60px;
            color: white;
            text-decoration: none;
        }
        /*个人中心字样CSS设置*/
        .ps{
            font-size: 20px;
            color: white;
            text-decoration: none;

        }
        /*个人中心图标css设置*/
        .pm{
            height:20px;
            color: white;
            margin-right: 2px;
            font-size: 20px;
            text-decoration: none;
        }
        /*导航栏CSS设置*/
        nav {
            position: sticky;
            top: 0;
            background-color: #153173;
            overflow: hidden;
        }
        /*导航栏副框设置*/
        nav ul {
            display: flex;
            justify-content: space-around;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        /*导航栏子框设置*/
        nav li {
            float: left;
        }
        nav li:hover {
            background-color: white;
        }
        /*导航栏各板块导航CSS设置*/
        nav li a {
            font-size: 20px;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-weight: normal;
            transition: font-weight 0.3s ease;
        }
        /*导航栏子块鼠标悬停CSS设置*/
        nav li a:hover {
            color:black;
            font-weight:normal;
            /*background-color: white;*/
            /* border-bottom: 2px solid red;*/
            animation: jump 1s infinite alternate; /* 持续时间1秒，无限循环，交替方向 */
        }
        @keyframes jump {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); } /* 向下跳动5px */
        }

        /*测导航栏*/
        /* 去除列表默认样式 */
        .left-ce {
            /*position: fixed;*/
            top: 258px;
            bottom: 0;
            width: 209px;
            background-image: linear-gradient(to bottom, rgba(39, 66, 113, 100) , rgb(15, 41, 77));
            z-index: 0;
            padding-top: 50px; /* 新增的padding-top */
            }


        .left-ce-ul {
            list-style-type: none; /* 去除列表项前的项目符号 */
            padding: 0; /* 去除默认的内边距 */
            margin: 0; /* 去除默认的外边距 */
            position: sticky;
            top: 258px;
            height:100%;
        }

        .left-ce-ul .block{
            margin-bottom: 20px;
        }
        .left-ce .block {
            width: 209px;
            height: 100px;
            color: #fff ;
            background-color: #062D6D;
            text-align: center;
            margin-bottom: 50px; /* 项之间的间距 */
            font-size: 25px; /* 字体大小 */
            overflow: hidden; /* 防止动画时文字溢出 */
            transition: transform 0.3s ease; /* 添加过渡效果 */
        }

        .left-ce .block a {
            display: block; /* 设置为行内块级元素  */
            line-height: 100px; /* 与li的高度相同，实现垂直居中 */
            color: inherit; /* 继承父元素的文字颜色 */
            text-decoration: none;/*取消链接下划线*/
            /* 初始时文字不跳动 */
            animation: none;
        }
        .block:hover {
            color: skyblue; /* 悬停时的文字颜色（这里保持白色，但可以根据需要更改）*/
            background-color: #0056b3;
        }
        .block:hover a {
            animation: jump 1s infinite alternate; /* 持续时间1秒，无限循环，交替方向 */
        }
        .block:active {
            transform: scale(0.95); /* 点击时缩小文字 */
            background-color: pink; /* 可选：改变背景色以增强视觉反馈 */
        }
        /* 定义跳动的动画 */
        @keyframes jump {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); } /* 向下跳动5px */
        }

        /*底栏CSS设置*/
        .footer{
            display: flex;
            background-color: #274271;
            width: 100%;
            height: 313px;
            margin-top: 100%;
        }
        /*底栏左半部分CSS设置*/
        .left-bottom{
            display: flex;
            margin: 50px auto;
        }
        /*底栏右半部分CSS设置*/
        .right-bottom{
            display: flex;
            color: white;
            font-size: 25px;
            margin: 40px auto;
        }
        /*底栏右半部分子块CSS设置*/
        .right-bottom ul li{
            padding: 10px;
        }
    </style>
</head>
<body>
<div class = "header d-flex justify-content-between">
    <div class = "header-left d-flex align-content-center">
        <a href="/"><img src="static/img/logo.png" alt="logo"></a>
        <a href = "/" class = "hp">510-梦想工作室</a>
    </div>
    <div class = "header-right d-flex align-content-center">
        <a href = "/personal" class = "pm"><i class=" bi-person-circle"></i></a>
        <a href = "/personal" class = "ps">个人中心</a>
    </div>
</div>
<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#news">荣誉展示</a></li>
        <li><a href="#people">工作室人员</a></li>
        <li><a href="#model">大模型</a></li>
        <li><a href="#share">资源共享</a></li>
        <li><a href="#joinus">加入我们</a></li>
        <li><a href="#aboutus">关于我们</a></li>
        <li><a href="#feedback">意见反馈</a></li>
    </ul>
</nav>
<div class="left-ce">
    <ul class="left-ce-ul">
        <li class="block"><a href="#">C语言相关</a></li>
        <li class="block"><a href="#">Python相关</a></li>
        <li class="block"><a href="#">Web相关</a></li>
        <li class="block"><a href="#">Java相关</a></li>
        <li class="block"><a href="#">后端相关</a></li>
    </ul>
</div>
<div class="footer">
    <div class="left-bottom">
        <img src="../html/static/img/logo.png" style="width: 220px;height: 220px;">
        <div style="color: white;font-size: 70px; margin: 55px 80px">510-梦想工作室</div>
    </div>
    <div class="right-bottom">
        <ul>
            <li>联系方式：</li>
            <li>地址：中国矿业大学徐海学院主楼-608</li>
            <li>版权所有：©中国矿业大学徐海学院510梦想工作室</li>
            <li>XXXXXXXXX</li>
        </ul>
    </div>
</div>
</body>

<script>
    // // 获取相关元素
    // const leftCeInner = document.querySelector('.left-ce-ul');
    // const headerHeight = 150;
    // const footerHeight = 313;
    //
    // // 监听滚动事件
    // leftCeInner.addEventListener('scroll', function() {
    //     const scrollTop = leftCeInner.scrollTop;
    //     const scrollHeight = leftCeInner.scrollHeight;
    //     const clientHeight = leftCeInner.clientHeight;
    //
    //     // 当滚动到顶部时
    //     if (scrollTop === 0) {
    //         leftCeInner.scrollTop = 0;
    //     }
    //
    //     // 当滚动到底部时
    //     if (scrollTop + clientHeight >= scrollHeight) {
    //         leftCeInner.scrollTop = scrollHeight - clientHeight;
    //     }
    // });
    // let nav = document.querySelector('.nav')
    //
    // window.addEventListener('scroll',function(e){
    //     if(window.pageYOffset > nav.offsetTop){
    //         nav.style.position = 'fixed'
    //         nav.style.top = '0px'
    //     }else{
    //         nav.style.position = 'static'
    //     }
    // })
    // document.addEventListener('DOMContentLoaded', function() {
    //     const headerHeight = 150; // 顶部导航栏的高度
    //     const footerHeight = 313; // 底部栏的高度
    //     const leftCe = document.querySelector('.left-ce');
    //     const firstBlock = document.querySelector('.left-ce .block:first-child');
    //     const header = document.querySelector('.header');
    //
    //     function adjustLeftCeScroll() {
    //         const scrollTop = window.pageYOffset;
    //         const headerBottom = headerHeight; // 顶部导航栏的底部位置
    //         const threshold = 0; // 距离顶部导航栏的阈值
    //
    //         // 当侧栏的第一个块接近顶部导航栏时，内部块不再向下滚动
    //         if (firstBlock.offsetTop < headerBottom - threshold) {
    //             leftCe.scrollTop = headerBottom - firstBlock.offsetTop - threshold;
    //         }
    //     }
    //
    //     // 初始化位置
    //     adjustLeftCeScroll();
    //
    //     // 监听页面滚动事件
    //     window.addEventListener('scroll', adjustLeftCeScroll);
    //
    //     // 监听侧栏内部滚动事件
    //     leftCe.addEventListener('scroll', () => {
    //         const firstBlock = document.querySelector('.left-ce .block:first-child');
    //         const headerBottom = headerHeight; // 顶部导航栏的底部位置
    //         const threshold = 0; // 距离顶部导航栏的阈值
    //
    //         // 当侧栏的第一个块接近顶部导航栏时，内部块不再向下滚动
    //         // if (firstBlock.offsetTop < headerBottom - threshold) {
    //         //     leftCe.scrollTop = headerBottom - firstBlock.offsetTop - threshold;
    //         // }
    //     });
    // });



</script>
</html>